<template>
	<div class="betting-record bg-bg-3 rounded-2xl text-t-3 text-sm">
		<div class="px-[10px] pt-[10px] pb-1">
			<div class="flex pb-2">
				<base-image
					class="w-[65px] h-[65px] object-cover rounded-sm"
					:src="imgSrc"
					:type="imgServer" />
				<div class="flex items-center ml-1 justify-between flex-1">
					<div class="flex-1 flex flex-col h-[100%] w-0 justify-around items-start">
						<div
							class="app-font-bold text-t-1 text-base w-[100%] overflow-hidden text-ellipsis whitespace-nowrap">
							{{ data.gameName }}
						</div>
						<div
							class="app-font-bold text-t-2 w-[100%] overflow-hidden text-ellipsis whitespace-nowrap">
							{{ data.providerName }}
						</div>
						<span
							class="inline text-xs bg-[var(--color-success)] text-t-1 rounded-sm px-2 py-[2px]"
							v-if="type === 'slots'">
							{{ 'RTP&nbsp;' + data.rtp }}
						</span>
					</div>
					<base-button
						:disabeld="!data.gamekey"
						size="small"
						class="ml-1"
						:block="false"
						type="primary"
						@click="handleClick">
						{{ $t('slotspre.play') }}
					</base-button>
				</div>
			</div>
			<slot name="slot"></slot>
			<div class="mt-[2px] text-t-3 flex items-center justify-between">
				<div class="label">
					{{ $t('betting.betAmount') }}
				</div>
				<div class="value">
					<up-amount :value="type === 'slots' ? data.betAmount : data.amount" />
				</div>
			</div>
			<div class="my-[2px] flex items-center justify-between text-base">
				<div class="label">{{ $t('betting.winAmount') }}</div>
				<div
					class="value text-success"
					v-if="data.status === 3 || data.betOrderState === 1 || data.payout">
					<up-amount :value="data.payout" />
				</div>
				<span v-else>-</span>
			</div>
		</div>
		<div class="h-[1px] w-full bg-bg-3"></div>
		<div class="px-[10px] py-1 text-t-4">
			<div class="flex items-center justify-between py-[2px]">
				<div class="label">
					{{ type === 'slots' ? $t('betting.sessionId') : $t('betting.betId') }}
				</div>
				<up-order-no class="order-num" :value="type === 'slots' ? data.sessionId : data.orderNo" />
			</div>
			<div
				class="flex items-center justify-between py-[2px]"
				v-if="data.status === 1 || data.betOrderState === 2">
				<div class="label">{{ $t('betting.betTime') }}</div>
				<div class="text">
					{{ type === 'slots' ? fmtDateTimeGMT(data.createTime) : fmtDateTimeGMT(data.createdAt) }}
				</div>
			</div>
			<div class="flex items-center justify-between py-[2px]" v-else>
				<div class="label w-[94px]">
					{{ type === 'slots' ? $t('betting.sessionTime') : $t('betting.settledTime') }}
				</div>
				<div class="value overflow-hidden text-ellipsis whitespace-nowrap">
					{{ type === 'slots' ? fmtDateTimeGMT(data.payoutTime) : fmtDateTimeGMT(data.settleAt) }}
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { BaseImage, BaseButton } from '@/components/base'
import { UpAmount } from '@/components/up'
import { UpOrderNo } from '@/components/up'
import { fmtDateTimeGMT } from '@/utils'
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps({
	data: {
		type: Object as any,
		default: () => {}
	},
	type: {
		type: String,
		default: 'slots'
	}
})

const imgSrc = computed(() => {
	if (props.data.tableIconDisplay) {
		return props.data.tableIconDisplay
	}
	if (props.data.gameIcon) {
		return props.data.gameIcon
	}
	return 'placeholder.svg'
})

const imgServer = computed(() => {
	if (imgSrc.value?.indexOf('http') === 0) {
		return 'network'
	}
	if (imgSrc.value !== 'placeholder.svg') {
		return 'server'
	}
	return 'local'
})

const handleClick = () => {
	if (props.type === 'casino') {
		router.push({
			name: 'CasinoDetail',
			params: {
				id: props.data.fullGameName
			}
		})
	} else {
		router.push({
			name: 'SlotsDetail',
			params: {
				id: props.data.gameKey
			}
		})
	}
}
</script>
<style lang="scss" scoped>
.order-num {
	max-width: calc(100% - 65px);
	:deep(.order-num__content) {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
</style>
